<template>
  <div class="category">
    <div class="header-box">
      <div class="header-box--title">
        <i class="el-icon-s-fold" @click="handleHidden"></i>项目列表
      </div>
      <!-- v-model="projectName" -->
      <!-- <el-input placeholder="输入项目名称" v-model="projectName" @input="searchData"></el-input> -->
      <el-button
        v-auth="`/project/manage--add`"
        type="primary"
        circle
        size="mini"
        @click="handleOpen"
        icon="el-icon-plus"
      ></el-button>
    </div>
    <el-scrollbar class="list" ref="listDom">
      <el-tree
        ref="treeRef"
        class="my-tree"
        :data="list"
        node-key="id"
        default-expand-all
        :expand-on-click-node="false"
        :props="defaultProps"
        v-loading="loading"
        highlight-current
        check-on-click-node
        @current-change="handleCheckChange"
      >
        <template #default="{ node }">
          <div class="custom-tree-node showname">
            <div class="tree__item--left" :title="node.label">
              {{ node.label }}
            </div>
            <div
              class="tree__item--right"
              v-auth="`/project/manage--add`"
              v-if="node.data.id !== 0"
            >
              <el-popover
                v-if="visible"
                placement="right"
                :width="80"
                trigger="click"
              >
                <!-- :visible="visible" -->
                <template #reference>
                  <div class="right__btn">
                    <i class="el-icon-plus"></i>
                  </div>
                </template>
                <div>
                  <div class="menu__item--btn" @click="handleAddProject(node)">
                    新增项目
                  </div>
                  <div class="menu__item--btn" @click="handleAddContract(node)">
                    新增合同
                  </div>
                </div>
              </el-popover>
              <i v-else class="el-icon-plus right__btn"></i>
            </div>
          </div>
        </template>
      </el-tree>
      <!-- </ul> -->
    </el-scrollbar>
    <el-dialog
      title="新增项目"
      v-model="dialogVisible"
      destroy-on-close
      width="680px"
      :before-close="beforeClose"
    >
      <project-view
        :nodeId="nodeId"
        :cacheParentCode="cacheParentCode"
        v-model:dialogVisible="dialogVisible"
        @resetGetData="resetGetData"
        @resetVisible="resetVisible"
      />
    </el-dialog>
    <el-dialog
      title="新增合同"
      v-model="dialogVisibleContract"
      destroy-on-close
      width="680px"
      :before-close="beforeClose"
    >
      <contract-view
        :nodeId="nodeId"
        v-model:dialogVisibleContract="dialogVisibleContract"
        @resetGetData="resetGetData"
        @resetVisible="resetVisible"
      />
    </el-dialog>
  </div>
</template>

<script lang="ts">
import type { Ref } from "vue";
import { defineComponent, ref, inject, watch, nextTick } from "vue";
import ProjectView from "./ProjectView.vue";
import ContractView from "./ContractView.vue";
import { postProjectTree } from "/@/api/project";
import { useProjectStoreHook } from "/@/store/modules/project";

export default defineComponent({
  components: {
    ProjectView,
    ContractView
  },
  setup() {
    let dialogVisible = ref<boolean>(false);
    let dialogVisibleContract = ref<boolean>(false);
    const listDom: Ref<HTMLElement | null> = ref(null);

    const defaultProps = {
      children: "children",
      label: "projectName",
      id: "id"
    };

    // const formInline = reactive({
    //   projectName: ""
    // });
    const treeRef = ref<HTMLElement | null>(null) as any;
    let list = ref([]);
    let loading = ref(false);
    let active: any = ref(inject("active"));
    let visible = ref(true);
    let nodeId = ref<number>(null);
    let projectHook = useProjectStoreHook();
    let cacheParentCode = ref<string>("");

    const getCategoryData = async (obj: object = {}) => {
      try {
        const { code, data } = await postProjectTree(obj);
        if (code === 200) {
          list.value = data;
        } else {
          list.value = [];
        }
        list.value.unshift({
          id: 0,
          projectName: "全部",
          children: []
        });
        active.value = list.value[0];
        nextTick(() => {
          treeRef.value && treeRef.value.setCurrentKey(active.value.id);
        });
      } catch (error) {
        console.log(error);
      } finally {
        loading.value = false;
      }
    };
    const searchData = () => {
      getCategoryData();
    };

    const handleCheckChange = e => {
      console.log(e);
      active.value = e;
    };

    const handleOpen = () => {
      nodeId.value = 0;
      dialogVisible.value = true;
    };

    const handleAddProject = node => {
      searchParentCode(node);
      nodeId.value = node?.data?.id;
      visible.value = false;
      dialogVisible.value = true;
    };

    const searchParentCode = node => {
      if (node.level === 1) {
        cacheParentCode.value = node?.data?.projectCode;
      } else {
        searchParentCode(node.parent);
      }
    };

    const handleAddContract = node => {
      nodeId.value = node?.data?.id;
      visible.value = false;
      dialogVisibleContract.value = true;
    };

    const beforeClose = () => {
      visible.value = true;
      dialogVisible.value = false;
      dialogVisibleContract.value = false;
    };

    const resetVisible = () => {
      visible.value = true;
    };

    const resetGetData = () => {
      beforeClose();
      getCategoryData();

      // 左侧数据更新
      projectHook.leftSetting();
    };

    const handleHidden = () => {
      projectHook.isHiddenSetting();
    };

    // 监听右侧数据变化
    watch(
      () => projectHook.rightRefresh,
      newVal => {
        if (newVal) {
          getCategoryData();
        }
      }
    );

    getCategoryData();

    return {
      // ...toRefs(formInline),
      treeRef,
      visible,
      dialogVisible,
      dialogVisibleContract,
      listDom,
      loading,
      list,
      defaultProps,
      nodeId,
      cacheParentCode,
      resetVisible,
      handleOpen,
      beforeClose,
      searchData,
      handleAddProject,
      handleAddContract,
      resetGetData,
      handleCheckChange,
      handleHidden
    };
  }
});
</script>

<style lang="scss" scoped>
.category {
  background: #fff;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  border: 1px solid #e4e7ed;
  margin-right: 5px;

  .header-box {
    padding: 10px;
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
    align-items: center;
    user-select: none;
    &--title {
      padding: 0;
      margin: 0;
      margin-right: 10px;
      font-size: 15px;
      color: #303133;
      font-weight: 500;
      display: -webkit-box;
      -webkit-line-clamp: 1;
      -webkit-box-orient: vertical;
      overflow: hidden;
      height: 30px;
      line-height: 30px;
      i {
        font-size: 16px;
        margin-right: 8px;
        cursor: pointer;
        &:hover {
          color: #409eff;
        }
      }
    }
    .el-input {
      flex: 1;
    }
  }
  .list {
    flex: 1;
    // height: auto;
    margin: 0;
    padding: 0;
    display: block;
    .custom-tree-node {
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: space-between;
      font-size: 14px;
      padding-right: 8px;
      user-select: none;
      // padding-right: 20px;
      width: 250px;
      .tree__item--left {
        flex: 1;
        white-space: nowrap;
        text-overflow: ellipsis;
        -o-text-overflow: ellipsis;
        overflow: hidden;
        font-size: 14px;
      }
      .tree__item--right {
        width: 20px;
        height: 20px;
        // .menu__wrap {
        //   padding: 10px;
        //   background-color: lawngreen;
        //   &--item {
        //     height: 25px;
        //     text-indent: 20px;
        //     border: 1px solid black;
        //   }
        //   // li:hover {
        //   //   background: #2a395b;
        //   // }
        // }

        .right__btn {
          display: flex;
          justify-content: center;
          align-items: center;
          width: 100%;
          height: 100%;
        }
        .right__btn:hover {
          color: #409eff;
          font-size: 16px;
        }
      }
    }
    // li {
    //   height: 38px;
    //   display: flex;
    //   justify-content: flex-start;
    //   align-items: center;
    //   padding-left: 20px;
    //   width: 100%;
    //   box-sizing: border-box;
    //   cursor: pointer;
    //   transition: 0.2s;
    //   & + li {
    //     border-top: 1px solid #eee;
    //   }
    //   &:hover {
    //     background: #e0ebf6;
    //   }
    //   &.active {
    //     background: rgba(186, 220, 255, 0.4);
    //     color: #409eff;
    //   }
    //   span {
    //     display: -webkit-box;
    //     -webkit-line-clamp: 1;
    //     -webkit-box-orient: vertical;
    //     overflow: hidden;
    //     font-size: 14px;
    //   }
    // }
    // .load-tip {
    //   font-size: 14px;
    //   color: #616161;
    // }
  }
}
.menu__item--btn {
  line-height: 30px;
  text-indent: 20px;
  border-radius: 4px;
  &:hover {
    background: #e0ebf6;
    color: #409eff;
    cursor: pointer;
  }
}

.showname {
  width: 170px; //外部容器的宽度
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  display: block;
}

:deep
  .el-tree--highlight-current
  .el-tree-node.is-current
  > .el-tree-node__content {
  // background: pink;
  color: #409eff;
  padding: 8px 0;
}
</style>
